{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - Streamers</title>
{% endblock %}

{% block body %}

<div class="container-fluid p-2" id="index-streamer-container">
    <div class="row">
        <div id="streamerList" class="col-lg col-xs-12 col-sm-12">
            <div class="row mx-2">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-live-title"><b>Streamers</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Username</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList d-flex flex-wrap justify-content-start">
                {% for streamer in streamerList %}
                    <li class="streamerCard py-1 pr-2">
                        <a href="/streamers/{{streamer.id}}/">
                        <img class="shadow lazy zoom" src="/images/{{streamer.pictureLocation}}" onerror="this.src='/static/img/user2.png';">
                        <div class="card-data">
                            <div class="card-cut-text name"><b>{{streamer.username}}</b></div>
                        </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    streamerListOptions = {
        valueNames: ['name']
    };

    var streamerList = new List('streamerList', streamerListOptions);
</script>
{% endblock %}


